<template>
  <div>
    <!-- 产品编辑dialog-->
    <el-dialog
      :title="title"
      class="add-product"
      :close-on-click-modal="false"
      v-dialogDrag
      :visible.sync="editVisible"
    >
      <el-form
        label-width="93px"
        ref="editForm"
        :model="editForm"
        :rules="dataRule"
      >
        <!-- oninput="value=value.replace(/[^\d]/g,'')" -->
        <el-form-item label="产品目录:" prop="productCategoryId">
          <treeselect class="treeselect-adjust" placeholder="请选择产品目录" :disable-branch-nodes="true" v-model="editForm.productCategoryId" @input="changeValue"  :multiple="false" :options="options"  :normalizer="normalizer"/>
        </el-form-item>
        <el-form-item label="产品名称:" prop="name" >
          <el-input maxlength="20" v-model.trim="editForm.name" placeholder="请输入产品名称(20字以内)"></el-input>
        </el-form-item>
        <!--        <el-form-item label="类型选择" prop="name">-->
        <!--          <el-radio-group v-model="editForm.types">-->
        <!--            <el-radio :label="1">产品</el-radio>-->
        <!--            <el-radio :label="3">既是产品又是原料</el-radio>-->
        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->



      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
        >确定</el-button
        >
        <el-button size="small" @click="close()">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { edit, getTreeData } from '@/api/market/product.js'
  import SelectProduct from '@/components/formEle/selectProduct'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  export default {
    components: {
      SelectProduct,
      Treeselect
    },
    data () {
      return {
        areaLabel: {},
        categoryData: {},
        method: '',
        options: [],
        title: '',
        editForm: {
          productCategoryId: '',
          productCategoryName: '',
          name: '',
          types: 1,
          id: ''
        },
        editVisible: false,
        detailsVisible: false,
        dataRule: {
          name: [{ required: true, message: '请输入产品名称', trigger: 'blur' },
            { max: 20, message: '最大长度是20个字符', trigger: 'change' }],
          types: [
            { required: true, message: '请选择产品类型', trigger: 'change' }
          ],
          productCategoryId: [
            {
              required: true,
              message: "请选择分类",
              trigger: 'input'
            }
          ]
        }
      }
    },
    methods: {
    	handleClose(done) {
				this.$Msg.confirm({
					title:'您确定要关闭吗？',
					content:this.GLOBAL.FORM_CLOSE_TIPS,
					confirmCall:()=>{
						done();
					}
				})
			},
      normalizer (node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      getTreeData (id,types) {
          getTreeData({ id: id,types: types }).then((res) => {
          if (res.data.code === '200') {
            console.log(res.data.result)
            this.options = res.data.result
            this.exec(this.options)
            console.log(this.options)
          }
        })
      },
      //递归删除空数组
      exec(array) {
        array.forEach(item => {
          if (item.children.length === 0) {
            delete item.children
          } else {
            this.exec(item.children)
          }
        })
      },
      changeValue(val) {
        this.$nextTick(()=>{
          this.$refs["editForm"].validateField("productCategoryId");
        })
      },
      init (method, editForm) {
          this.getTreeData(0,0);
        if (method === 'add') {
          this.editVisible = true
          this.categoryData = editForm
          this.$nextTick(() => {
            this.$refs.editForm.clearValidate()
          })
          if (this.categoryData) {
            console.log(11111)
            this.editForm.productCategoryId = this.categoryData.id
          }
          this.editForm.id = ''
          this.editForm.name = ''
          this.title = '新增产品'
        } else if (method === 'edit') {
          this.editForm = editForm
          this.editVisible = true
          this.method = method
          this.categoryData.name = this.editForm.productCategoryName
          this.categoryData.id = this.editForm.productCategoryId
          this.$nextTick(() => {
            this.$refs.editForm.clearValidate()
          })
          this.title = '修改产品'
        }
        console.log(this.method)
      },
      close () {
        this.editVisible = false
      },
      doSubmit () {
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            // this.editForm.productCategoryId = this.categoryData.id
            edit(this.editForm).then((res) => {
              if (res.data.code === '200') {
                this.$message({
                  message: '编辑成功',
                  type: 'success'
                });
                this.editVisible = false;
                this.$emit('refreshDataList');
              } else if (res.data.code === 'A120502') {
                this.$message({
                  message: '已重复',
                  type: 'error'
                });
              }
            })
          }
        })
      }
    },
    mounted: function () {
      this.getTreeData(0,0)
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100%;
  }
  ::v-deep.add-product{
    .el-dialog__body{
      min-height: 200px;
      overflow-y: hidden;
      .el-input__inner{
        width: 320px;
      }
    }
    .treeselect-adjust.vue-treeselect{
      .vue-treeselect__control{
        width: 320px;
      }
    }
    .vue-treeselect__menu-container{
      width: 320px;
    }

    .vue-treeselect__menu{
      max-height: 125px !important;
      overflow-y: auto;
    }
  }
</style>
